<!-- 订阅管理 -->
<template>
  <div class="orderDom">
    <el-dialog :title="viewType == 'edit' ? '审核' : '查看'" :visible.sync="dialogExamine" width="1000px" top="10px">
      <div class="iframeFalse map" style="width: 100%">
          <wizMap ref="wizmapMe4" mapId="mapid4" ></wizMap>
           <!-- <img src="../../assets/image/222.png" alt="" width="100%"> -->
        </div>
        <dataViewInfo ref="refDataView"></dataViewInfo>
          <!-- <myCustomization ref="myCustomizationRef" viewType="view" :viewParams="viewParams"></myCustomization> -->
      <!-- <div class="dialog-border"></div> -->
      <div v-if="viewType == 'edit'" class="title" style="margin-bottom: 5px;">审核备注</div>
      <el-form :model="formIsexamine" class="demo-form-mini" v-if="viewType == 'edit'">
        <!-- <el-form-item label="">
          <el-radio-group
            class="radio-isexamine"
            v-model="formIsexamine.isexamine"
          >
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核拒绝</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <el-form-item  >
          <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="formIsexamine.examineview"
            maxlength="500"
            show-word-limit
            rows="3"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="viewType == 'edit'">
        <el-button @click="dialogExamine = false">取 消</el-button>
        <el-button type="primary" @click="handleExamine2">审核通过</el-button>
        <el-button type="warning" @click="handleExamine3">审核拒绝</el-button>
      </span>
    </el-dialog>
    <el-dialog title="文件列表" :visible.sync="dialogDownload" width="60%">
      <!-- <el-form :inline="true" :model="currentRow" class="demo-form-inline-box">
        <el-form-item label="IP地址">
          {{ currentRow.ipaddr }}
        </el-form-item>
        <el-form-item label="端口号">
          {{ currentRow.protno }}
        </el-form-item>
        <el-form-item label="路径">
          {{ currentRow.url }}
        </el-form-item>
        <br />
        <el-form-item label="账号">
          {{ currentRow.account }}
        </el-form-item>
        <el-form-item label="密码">
          {{ currentRow.password }}
        </el-form-item>
      </el-form> -->
      <el-table
        v-loading="tableLoading"
        :data="fileList"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="date" label="日期"> </el-table-column>
        <el-table-column prop="product" label="产品"> </el-table-column>
        <el-table-column prop="frequency" label="时次"> </el-table-column>
        <el-table-column prop="startime" label="开始时间"> </el-table-column>
        <el-table-column prop="endtime" label="结束时间"> </el-table-column>
        <el-table-column prop="size" label="数据容量"> </el-table-column>
        <el-table-column prop="state" label="传输状态">
          <template slot-scope="scope">
            {{ scope.row.state == 1 ? "传输成功" : "传输失败" }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="80">
          <template slot-scope="scope">
            <el-button
              type="success"
              @click="handleCopy(scope.row)"
              size="small"
              >下载</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogDownload = false">关 闭</el-button>
        <!-- <el-button type="primary" @click="handleCopy">复制信息</el-button> -->
      </span>
    </el-dialog>

    <el-tabs v-model="activeName" @tab-click="handleTabsClick">
      <el-tab-pane
        label="全部订单"
        name="0"
      ></el-tab-pane>
      <el-tab-pane
        label="待审核订单"
        name="1"
      ></el-tab-pane>
      <el-tab-pane
        label="审核通过订单"
        name="2"
      ></el-tab-pane>
      <el-tab-pane
        label="审核拒绝订单"
        name="3"
      ></el-tab-pane>
    </el-tabs>
    <div class="formDom">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="订单编号">
          <el-input v-model="formInline.no" placeholder="订单编号"></el-input>
        </el-form-item>
        <el-form-item label="资料名称">
          <el-input
            v-model="formInline.filename"
            placeholder="资料名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <div class="flex">
            <el-button type="primary" @click="onSearch">查询</el-button>
              <el-button type="info" @click="onReset">重置</el-button>
              <el-upload
                    class="upload-demo"
                    style="margin-left: 10px;"
                    action="#"
                    :on-progress="onImport"
                    :limit="1"
                    :show-file-list="false"
                    accept=".xls,.xlsx"
                    >
                    <el-button type="primary">导入</el-button>
                </el-upload>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="tableDom">
      <el-table
        v-loading="tableLoading"
        :data="tableData"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="id" label="序号" width="50"> </el-table-column>
        <el-table-column prop="no" label="订单编号"> </el-table-column>
        <el-table-column prop="filename" label="数据资源名称">
        </el-table-column>
        <el-table-column  prop="username" label="用户">
        </el-table-column>
        <el-table-column prop="isexamine" label="审核状态">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.isexamine == 2">审核通过</el-tag>
            <el-tag type="warning" v-if="scope.row.isexamine == 1">待审核</el-tag>
            <el-tag type="danger" v-if="scope.row.isexamine == 3">审核拒绝</el-tag>
          </template>
        </el-table-column>
    
        <el-table-column prop="endtime" label="服务结束时间"> </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              v-if="activeName != 'orderHistory' && scope.row.isexamine == 1"
              @click="handleExamineShow(scope.row)"
              type="text"
              size="small"
              >审核</el-button
            >
            <!-- <el-button
              v-if="activeName != 'orderHistory' && scope.row.isexamine == 2"
              @click="handleStop(scope.row)"
              type="text"
              size="small"
              >{{ scope.row.state == 2 ? "停止服务" : "运行服务" }}</el-button
            > -->
            <el-button v-if="scope.row.isexamine == 3 || scope.row.isexamine == 2" @click="handleShow(scope.row)" type="text" size="small" >查看定制</el-button  >
            <!-- <el-button v-if="scope.row.isexamine == 2" @click="handleDownload(scope.row)" type="text"  size="small" >数据清单</el-button > -->
            <el-button @click="handleDelete(scope.row)" type="text" size="small" >删除</el-button >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <ComPagination
      :total="total"
      :currentPage="formInline.pageNum"
      :pageSize="formInline.pageSize"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></ComPagination>
    <!-- <div v-show="activeName == 'orderProgress'"></div>
    <div v-show="activeName == 'orderHistory'"></div> -->

      <!-- <el-dialog title="地图框选" :visible.sync="dialogListInfo" width="75%" top="10px"  :before-close="handleClose">
            <div style="width: 100%; height: 800px; overflow-y: auto;">
                <myCustomization ref="myCustomizationRef" viewType="view" :viewParams="viewParams" :flexTableid="viewParams.fileid"></myCustomization>
            </div>
            <span slot="footer">
              <div style="text-align: end;border-top: 1px solid #ddd;padding-top: 20px;">
                  <el-button size="small" @click="dialogListInfo = false">返 回</el-button>
              
              </div>
            </span>
        </el-dialog> -->
  </div>
</template>

<script>
import ComPagination from "@/components/comPagination.vue";
// import myCustomization from "@/views/myCustomization/index.vue";
import dataViewInfo from "@/components/dataView.vue";
import wizMap from "@/components/wizMap/wizMap.vue";

export default {
  components: {
    ComPagination,
    dataViewInfo,
    wizMap
  },
  data() {
    return {
      tableLoading: false,
      dialogDownload: false,
      dialogExamine: false,

      dialogListInfo: false,
      dialogExamineStatus: false,
      viewParams: {
        id: '',
        fileid: '',
      },

      viewType: 'edit',
      activeName: "0",
      total: 0,
      userid: sessionStorage.getItem('userid'),
      isadmin: sessionStorage.getItem('isadmin'),
      currentRow: {},
      formInline: {
        datatype: '',
        filename: "",
        isexamine: 0,
        no: '',
        state: '',
        pageNum: 1,
        pageSize: 10,
      },
      formIsexamine: { examineview: "", isexamine: 1 },
      tableData: [
        // {
        //   id: "234324320191892",
        //   date: "一个月",
        //   time: "2016-05-02",
        //   name: "全球argo浮标观测资料",
        //   type: "通过",
        // },
        // {
        //   id: "234324320191893",
        //   date: "一年",
        //   time: "2023-01-01",
        //   name: "全国地名数据",
        //   type: "通过",
        // },
        // {
        //   id: "234324320191895",
        //   date: "一个月",
        //   time: "2022-09-01",
        //   name: "全国影像图",
        //   type: "通过",
        // },
        // {
        //   id: "234324320191896",
        //   date: "一个月",
        //   time: "2018-02-12",
        //   name: "全国省达组网拼图",
        //   type: "待审核",
        // },
      ],
      fileList: [],
    };
  },
  created() {
    this.onSearch();
    this.userid = sessionStorage.getItem("userid");
    this.isadmin = sessionStorage.getItem("isadmin");
    console.log(this.isadmin);
    
  },
  methods: {
    onSearch() {
   
      // if (this.isadmin) {
      //   req.type = 0;
      // } else {
      //   if (this.activeName == "orderProgress") {
      //     req.type = 1;
      //   }
      //   req.isexamine = 0;
      // }
      this.tableLoading = true;
      this.tableData = [];
      this.formInline.userid = this.userid;

      this.$http
        .post(`/fileOrder/list/coupe`, this.formInline)
        .then((res) => {
          this.tableLoading = false;
          if (res.code == 200) {
            this.tableData = res.data.records || [];
            this.total = res.data.total || 0;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          this.tableLoading = false;
          this.$message.error(err.message);
        });
    },
    onReset() {
      this.formInline = {
        datatype: '',
        filename: "",
        isexamine: 0,
        no: '',
        state: '',
        pageNum: 1,
        pageSize: 10,
      };
    },
    handleTabsClick(tab, event) {
      // console.log(tab, event);
      this.formInline.isexamine = +tab.name;
      this.formInline.pageNum = 1
      // if (this.activeName == "isexamine_1") {
      //   this.formInline.isexamine = 1;
      // } else if (this.activeName == "isexamine_2") {
      //   this.formInline.isexamine = 2;
      // } else if (this.activeName == "isexamine_3") {
      //   this.formInline.isexamine = 3;
      // } else {
      //   this.formInline.isexamine = 0;
      // }
      // if (this.activeName == 'orderProgress'){
      //   this.formInline.state = 1;
      // } else if (this.activeName == 'orderHistory'){
      //   this.formInline.state = 2;
      // }
      this.onSearch();
    },
    handleStop(row) {
      let type = "1";
      if (row.state == "1") {
        type = "2";
      }
      let req = {
        id: row.id,
        state: type,
      };
      this.$http
        .post(`/fileOrder/update`, req)
        .then((res) => {
          if (res.code == 200) {
            this.onSearch();
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
    },
    handleShow(row) {
      this.viewType = 'view'
      this.dialogExamine = true;
      let  data = {...row}
      data.jsonDate = JSON.parse(data.jsonDate)
      let obj = {
        mapView: [[105, 36], 3],
        isShowPane: true,
        // dataView: this.dataView,
        paneType: 1,
        showtype: data.showType || '1',
        jwdfw: [
          [140, 0],
          [70, 0],
          [70, 60],
          [140, 60],
        ],
        bakView: data.jsonDate.mapPosition
      }
      this.$nextTick(() => {
          // console.log(this.$refs.myCustomizationRef);
            this.$refs.refDataView.initParams(data);
            this.$refs.wizmapMe4.mapData = obj
      })
    },
    handleDownload(row) {
      this.currentRow = row;
      this.fileList = [];

      this.$http
        .post(`/dataDetail/list?subscribeid=` + row.id)
        .then((res) => {
          if (res.code == 200) {
            this.fileList = res.data.records || [];
            this.dialogDownload = true;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          this.tableLoading = false;
          this.$message.error(err.message);
        });
    },
    handleDelete(row){
      this.$confirm('是否确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(() => {
          this.$http .post(`/fileOrder/delete?id=${row.id}`).then((res) => {
              if (res.code == 200) {
                this.onSearch();
              } else {
                this.$message.error(res.message);
              }
          }) .catch((err) => {
              this.tableLoading = false;
              this.$message.error(err.message);
          });
      }).catch(() => {});
    },
    handleCopy() {
      let text =
        this.currentRow.ipaddr +
        " " +
        this.currentRow.protno +
        " " +
        this.currentRow.url +
        " " +
        this.currentRow.account +
        " " +
        this.currentRow.password;
      try {
        var textarea = document.createElement("textarea");
        textarea.style.position = "fixed";
        textarea.style.opacity = 0;
        textarea.value = text;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand("copy");
        document.body.removeChild(textarea);
        //  navigator.clipboard.writeText(txt);
        this.$message.success("复制成功");
      } catch (error) {
        this.$message.error("复制失败");
      }
    },
     // 导入
     onImport(event, file, fileList) {
        // this.formInline.userid = sessionStorage.getItem("userid");
        let data = new FormData();
        data.append("file", file.raw);
        this.$http.post(`/fileOrder/save/excel`, data).then((res) => {
            if (res.code == 200) {
              this.$message.success(res.message);
              this.formInline.pageNum = 1;
              this.onSearch();
            } else {
              this.$message.error(res.message);
            }
          })
          .catch((err) => {
            this.$message.error(err.message);
          });
    },
    handleExamineShow(row) {
      this.currentRow = row;
      this.formIsexamine.isexamine = row.isexamine;
      this.formIsexamine.examineview = row.isexamine;
      // this.viewParams = {
      //   id: row.id,
      //   fileid: row.fileid,
      // };
      this.viewType = 'edit'
      this.dialogExamine = true;
      let  data = {...row}
      data.jsonDate = JSON.parse(data.jsonDate)
      // delete data.jsonDate.dataViewName
      // data.dataViewName = Object.keys(data.jsonDate.dataView)[0]
      console.log(data , '审核');
      let obj = {
        mapView: [[105, 36], 3],
        isShowPane: true,
        // dataView: this.dataView,
        paneType: 1,
        showtype: data.showType || '1',
        jwdfw: [
          [140, 0],
          [70, 0],
          [70, 60],
          [140, 60],
        ],
        bakView: data.jsonDate.mapPosition
      }
      this.$nextTick(() => {
          // console.log(this.$refs.myCustomizationRef);
            this.$refs.refDataView.initParams(data);
            this.$refs.wizmapMe4.mapData = obj
      });
    },
    handleExamine2() {
      this.formIsexamine.isexamine = 2;
      this.handleExamine();
    },
    handleExamine3() {
      this.formIsexamine.isexamine = 3;
      this.handleExamine();
    },
    handleExamine() {
      let req = {
        examineview: this.formIsexamine.examineview,
        id: this.currentRow.id,
        isexamine: this.formIsexamine.isexamine,
      };
      this.$http
        .post(`/fileOrder/update/examine`, req)
        .then((res) => {
          if (res.code == 200) {
            this.dialogExamine = false;
            this.onSearch();
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
    },
    handleCurrentChange(page) {
      this.formInline.pageNum = page;
      this.onSearch();
    },
    handleSizeChange(size) {
      this.formInline.pageSize = size;
      this.onSearch();
    },
    handleClose() {
      this.dialogListInfo = false;
      this.dialogExamineStatus = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.orderDom {
  .title{
		font-size: 14px;
		padding: 0 15px;
    height: 35px;
		font-weight: bold;
		background-color: #f2f6fc;
        display: flex;
        align-items: center;
        // background-image: url(../../public/image/title-bg.png);
        // background-size: 100% 100%;
        position: relative;
        &::after{
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 5px;
            height: 100%;
            background-color: #308CE9;
        }
	}
  .map {
    width: 350px;
    height: 300px;
    position: relative;
    .full-screen {
      position: absolute;
      bottom: 10px;
      right: 10px;
      font-size: 12px;
      z-index: 9;
      background-color: #e7e7e7;
      padding: 5px 10px;
      color: #377ffd;
      display: flex;
      align-items: center;
      cursor: pointer;
    }
    .site-list {
      width: auto;
      padding: 10px;
      margin-bottom: 3px;
      background-color: #f3f8fc;
    }
  }
  .iframeFalse {
    width: 350px;
    height: 300px;
  }
  height: 100%;
  background-color: #fff;
  padding: 20px;
  ::v-deep .el-dialog__wrapper {
    // .el-dialog__header {
    //   background-image: linear-gradient(
    //     to right,
    //     #89b7fb,
    //     #b1c7fc,
    //     #d1d8fc,
    //     #ebebfd,
    //     #ffffff
    //   );
    // }
    .el-dialog__header{
        padding: 10px;
        background-image: url(../../../public/image/dialog-head.png);
        background-size: 100% 100%;
        .el-dialog__title{
          color:#000;
  
        }
      }
      .el-dialog__body{
        padding:10px;
      }
    .dialog-border {
      border-top: 2px solid #409eff;
      margin-bottom: 10px;
    }
    .dialog-footer {
    }
  }
  ::v-deep .demo-form-inline-box {
    background-color: #f8f8f8;
    padding: 10px 10px 0 10px;
    font-size: 16px;
    .el-form-item__label {
      font-weight: bold;
      color: dodgerblue;
    }
  }
  ::v-deep .demo-form-mini {
    .el-form-item {
      margin-bottom: 0 !important;
    }
    .el-form-item__label {
      font-weight: bold;
    }
    .radio-isexamine {
      .el-radio__inner {
        border: 1px solid dodgerblue;
      }
      .el-radio__label {
        font-size: 16px;
        color: #000;
      }
    }
  }
}
</style>
